import RenderGender from '@/components/RenderGender.vue';
import { GOODS_STATUS_COLOR_MAP, GOODS_STATUS_OF_FIXED_PRICE_MAP } from '@/const/goods'
import { formatTime, renderMaybeNull } from '@/utils';
import type { DataTableProps } from 'naive-ui';
import { NAvatar, NImage } from 'naive-ui';
import { h } from 'vue';

export const onSellColumns: DataTableProps['columns'] = [
	{
		title: '商品ID',
		key: 'id',
		fixed: 'left',
		width: 100,
	},
	{
		title: '发布人',
		key: 'userAvatar',
		width: 100,
		align: 'center',
		render: item => h('div', {
			style: {
				display: 'flex',
				justifyContent: 'center',
				alignItems: 'center',
				flexDirection: 'column',
				gap: '5px'
			}
		}, [
			h(NAvatar, {
				src: item.userAvatar,
				size: 40,
				round: true,
			}),
			renderMaybeNull(item.userName)
		])
	},
	{
		title: '商品封面',
		key: 'headImg',
		width: 100,
		render: item => h('div', {
			style: {
				width: '100%',
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center',
				backgroundImage: `url(${item.headImg})`,
				backgroundRepeat: 'no-repeat',
				backgroundSize: 'cover',
				backgroundPosition: 'center',
			}
		}, [
			h(NImage, {
				src: item.headImg,
				height: 70,
				width: '100%',
				objectFit: 'contain',
				style: {
					width: '100%',
					height: '100%',
					backgroundColor: 'rgba(0,0,0,0.5)',
					backdropFilter: 'blur(5px)',
				}
			})
		])
	},
	{
		title: '品名',
		key: 'name',
		ellipsis: {
			tooltip: true
		},
		width: 150,
	},
	{
		title: '一级分类',
		key: 'categoryName',
		ellipsis: {
			tooltip: true
		},
		width: 80,
	},
	{
		title: '二级分类',
		key: 'categoryTagName',
		ellipsis: {
			tooltip: true
		},
		width: 80,
	},
	{
		title: '雌雄',
		key: 'gender',
		width: 60,
		render: item => h(RenderGender, { gender: item.gender, isPet: true })
	},
	{
		title: '竞拍时间',
		key: 'time',
		width: 130,
		render: item => item.goodsType === 0 ? '--' : h('div', {}, [
			h('div', {}, [formatTime(item.startTime, 'YYYY-MM-DD HH:mm')]),
			h('div', {}, [' ~ ' + formatTime(item.endTime, 'YYYY-MM-DD HH:mm')]),
		])
	},
	{
		title: '商品状态',
		key: 'status',
		width: 60,
		render: item => h('div',
			{
				style: {
					color: `var(${GOODS_STATUS_COLOR_MAP[item.status]})`
				}
			},
			[
				GOODS_STATUS_OF_FIXED_PRICE_MAP[item.status]
			]
		)
	},
]
